<template>
	<div id="login-app">
		<div class="login-info">
			<p> 会员登录</p>

			<ul>
				<li>
					<input type="text" id="userName" placeholder="用户名/手机号/邮箱" />
				</li>
				<li>
					<input type="password" id="pwd" placeholder="密码" />
				</li>

				<li>
					<!-- <label><input type="checkbox" name="remember" value="remember" /> 记住密码</label> -->
					<button class="btn" @click="Login">登录</button>
				</li>
			</ul>
			<p class="mg">
				<small @click="$router.push('/Register')">快速注册</small>
				<small @click="$router.push('/ForgetPwd')">忘记密码</small>
			</p>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from "@/components/common/_footer.vue"
	export default {
		data() {
			return {}
		},
		components: {
			Footer
		},
		beforeCreate: function() {
			{
				document.body.style.backgroundColor = "#f4f4f4";
			}
		},
		mounted: function() {
			document.querySelector("#menu").querySelectorAll("a")[3].classList.add("router-link-exact-active");
		},
		methods: {
			Login: function(e) {
				var userName = document.getElementById("userName");
				if (userName.value.trim() == "") {
					userName.focus();
					return;
				}
				var pwd = document.getElementById("pwd");
				if (pwd.value.trim() == "") {
					pwd.focus();
					return;
				}
				this.$http.post(config.ApiUrl + 'account/login', {
					userName: userName.value.trim(),
					Password: pwd.value.trim(),
					smsCaptcha: ''
				}, {
					emulateJSON: true
				}).then(function(res) {
					//console.log(res.body.data);
					if (res.body.success == true) {
						console.log(res.body.data);
						localStorage.setItem("memberName", userName.value.trim());
						localStorage.setItem("memberPwd", pwd.value.trim());
						localStorage.setItem("id", res.body.data.id);
						//this.$router.push("/Member");
					} else {
						this.$layer.toast({
							icon: 'icon-check', // 图标clssName 如果为空 toast位置位于下方,否则居中
							content: res.body.info,
							time: 3000 // 自动消失时间 toast类型默认消失时间为2000毫秒
						});
					}
					//this.article = res.body.data;
				}, function(res) {
					console.log('失败')
				});
			}
		}
	}
</script>

<style scoped>
	#login-app {
		/* background-color: #; */
	}

	.login-info {
		display: block;
		margin: 2rem auto;
		background-color: white;
		width: 90vw;
		border-radius: .5rem;
	}

	.login-info p {
		text-align: center;
		font-size: 2rem;
		color: #777;
		padding-top: 1rem;
	}

	.login-info li:not(:last-child) {
		margin: 1rem;
		border-bottom: 1px solid #e3e3e3;
		padding: 1rem 0;
	}

	.login-info li input {
		font-size: 1.6rem;
		width: 100%;
	}

	.login-info li button {
		background-color: #FD482C;
		color: white;
		font-size: 1.8rem;
		text-align: center;
		display: block;
		width: 80vw;
		margin: 3rem auto;
		border: none;
		border-radius: 0;
		padding: .5rem 0;
		margin-bottom: 1rem;
		-webkit-user-select: none;
		-webkit-appearance: none;
	}

	.mg {
		padding-bottom: 1rem;
		display: flex;
		margin: 1rem;
	}

	.mg small:first-child {
		flex: 1;
		text-align: left;
	}

	.mg small:last-child {
		flex: 1;
		text-align: right;
	}
</style>
